import React, { useEffect, useState } from 'react';
import {
    Text,
    View,
    StyleSheet,
    Image,
    TouchableOpacity,
    Dimensions,
    ImageBackground,
    LogBox,
    Pressable,
    DeviceEventEmitter,
} from 'react-native';
import Orientation from 'react-native-orientation';
import {
    ExpandedRegionLayoutOptions,
    FoldedRegionLayoutOptions,
    FoldSplitContainer,
    HoverModeRegionLayoutOptions,
    PresetSplitRatio,
} from '@hadss/react_native_adaptive_layout/src';
// import SampleTurboModule from '../basic/SampleTurboModule';
import Swiper from 'react-native-swiper';
import musicPlayer from '../util/index';

import {
    GestureHandlerRootView,
    GestureDetector,
    PanGestureHandler,
    Gesture,
} from 'react-native-gesture-handler';

import Animated, {
    useSharedValue,
    useAnimatedStyle,
    withSpring,
} from 'react-native-reanimated';
import SharePlayImage from '../../../asset/svg/SharePlayImage';
import LikeImage from '../../../asset/svg/LikeImage';
import RepeatImage from '../../../asset/svg/RepeatImage';
import LeftImage from '../../../asset/svg/LeftImage';
import MusicNoteListImage from '../../../asset/svg/MusicNoteListImage';
import ForwardEndFillImage from '../../../asset/svg/ForwardEndFillImage';
import PauseImage from '../../../asset/svg/PauseImage';
import PalyImage from '../../../asset/svg/PlayImage';
import ShareImage from '../../../asset/svg/ShareImage';
import BellIamge from '../../../asset/svg/BellImage';
import ArrowDownCircleImage from '../../../asset/svg/ArrowDownCircleImage';
import DotImage from '../../../asset/svg/DotImage';

// const { width: screenWidth } = Dimensions.get('window');
// const PROGRESS_BAR_WIDTH = screenWidth - 30; // 留出边距
const THUMB_SIZE = 20;

function MusicPlay() {
    const [playState, setPlayState] = useState<boolean>();
    const [position, setPosition] = useState<number>(0);

    const [duration, setDuration] = useState<number>(0);
    const [title, setTitle] = useState<string>();
    const [artist, setArtist] = useState<string>();
    const [isHover, setIsHover] = useState<boolean>(false);
    const [isExpanded, setIsExpanded] = useState<boolean>(
        Dimensions.get('window').width >= 600,
    );
    const isWide =
        Dimensions.get('screen').height >= 900 ||
        Dimensions.get('screen').width >= 900;
    const [isLarge, setIsLarge] = useState<boolean>(
        Dimensions.get('window').width >= 800,
    );

    // 鼠标是否悬浮
    const [isHovered, setIsHovered] = useState(false);

    useEffect(() => {
        // 初始化逻辑
        console.log('xlxl--Component did mount (equivalent)');
        // 鸿蒙设备
        DeviceEventEmitter.addListener('keyEvent', event => {
            console.log('xlxl----', event);
            switch (event.keyCode) {
                case 19: // 上键
                    console.log('xlxl--上键按下');
                    // 处理上键逻辑
                    break;
                case 20: // 下键
                    console.log('xlxl--下键按下');
                    // 处理下键逻辑
                    break;
                case 21: // 左键
                    console.log('xlxl--左键按下');
                    // 处理左键逻辑
                    break;
                case 22: // 右键
                    console.log('xlxl--右键按下');
                    // 处理右键逻辑
                    break;
                default:
                    break;
            }
        });
        // 返回的函数相当于componentWillUnmount
        return () => {
            // 清理逻辑
            console.log('Component will unmount (equivalent)');
            DeviceEventEmitter.removeAllListeners('keyEvent');
        };
    }, []);

    // 进度条
    const onHandlerStateChange1 = (event: any) => {
        const newProgress = Math.max(
            0,
            Math.min(1, event.nativeEvent.x / (isWide && isLarge ? 300 : 320)),
        );
        seekTo(newProgress * 100);
        setPosition(newProgress * 100);
    };

    const onGestureEvent1 = (event: any) => {
        const newProgress = Math.max(
            0,
            Math.min(1, event.nativeEvent.x / (isWide && isLarge ? 300 : 320)),
        );
        seekTo(newProgress * 100);
        setPosition(newProgress * 100);
    };
    // 放缩图片 --start
    // 图片放缩用的
    const MIN_SCALE = 0.5; //最小放缩比例
    const MAX_SCALE = 1; //最大放缩比例
    let scale = useSharedValue(0.8);
    const savedScale = useSharedValue(0.8);
    const pinchGesture = Gesture.Pinch()
        .onBegin(() => {
            scale.value = savedScale.value;
        })
        .onUpdate(e => {
            let newScale = savedScale.value * e.scale;
            if (newScale >= MAX_SCALE) {
                newScale = MAX_SCALE;
            } else if (newScale <= MIN_SCALE) {
                newScale = MIN_SCALE;
            }
            scale.value = newScale;
        })
        .onEnd(() => {
            savedScale.value = scale.value;
        });

    const animatedStyle = useAnimatedStyle(() => ({
        transform: [{ scale: scale.value }],
    }));
    //放缩图片 --end
    useEffect(() => {
        LogBox.ignoreAllLogs();
        isWide && isLandscape && Orientation.lockToLandscape();
        isWide && !isLandscape && Orientation.lockToPortrait();
        const screenListener = Dimensions.addEventListener(
            'change',
            ({ window: { width } }) => {
                if (isWide) {
                    if (isLandscape) {
                        Orientation.lockToLandscape();
                    } else {
                        Orientation.lockToPortrait();
                    }
                } else {
                    setIsExpanded(width >= 600);
                    setIsLarge(width >= 800);
                }
            },
        );
        musicPlayer.onProgress((currentTime, duration) => {
            setPosition(currentTime / 1000);
            setDuration(duration / 1000);
        });
        updateTrack();
        musicPlayer.setOnTrackChange(() => {
            updateTrack();
        });
        return () => {
            screenListener.remove();
            isWide && Orientation.unlockAllOrientations();
        };
    }, [isWide]);

    const onLayout = (event: any) => {
        const { nativeEvent } = event;
        const { layout } = nativeEvent;
        setIsHover(layout.width > 600);
    };

    // 切换播放状态
    const togglePlayPause = async () => {
        const state = musicPlayer.getCurrentStatus();
        state ? musicPlayer.pause() : musicPlayer.play();
        setPlayState(!state);
    };

    const skipToNext = async () => {
        musicPlayer.nextTrack();
        updateTrack();
        setPlayState(true);
    };

    const skipToPrevious = async () => {
        musicPlayer.previousTrack();
        updateTrack();
        setPlayState(true);
    };

    const updateTrack = () => {
        debugger;
        const track = musicPlayer.getCurrentTrack();
        if (track) {
            setPlayState(musicPlayer.getCurrentStatus());
            setArtist(track.artist);
            setTitle(track.title);
        }
    };

    const seekTo = (val: number) => {
        musicPlayer.setCurrentTime(val * 1000);
    };

    const formatTime = (second: number) => {
        // 计算分钟数，注意 Math.floor 会向下取整
        const minutes = Math.floor(second / 60);
        // 计算剩余的秒数，使用 % 运算符取余数
        const remainingSeconds = Math.floor(second % 60);

        // 使用字符串的 padStart 方法来确保分钟和秒数都是两位数
        // 如果数字小于 10，则在前面添加一个 0
        const formattedMinutes = minutes.toString().padStart(2, '0');
        const formattedSeconds = remainingSeconds.toString().padStart(2, '0');

        // 返回格式化的时间字符串
        return `${formattedMinutes}:${formattedSeconds}`;
    };

    const backToLast = () => {
        // SampleTurboModule.pushStringToHarmony('PlayListPage', 2);
    };

    const primaryRender = () => (
        // 图片的放缩
        <GestureHandlerRootView>
            <GestureDetector gesture={pinchGesture}>
                <Animated.Image
                    style={[{ width: '100%', height: '100%' }, animatedStyle]}
                    source={require('../../../asset/artwork.png')}
                    resizeMode="contain"
                />
            </GestureDetector>
        </GestureHandlerRootView>
    );

    const secondRender = () => (
        <View style={{ flex: 1, alignItems: 'center' }} onLayout={onLayout}>
            <View
                style={{
                    width: isHover ? '93%' : '88%',
                    marginHorizontal: 20,
                    alignItems: isHover ? 'flex-start' : 'center',
                    marginTop: isHover ? 0 : 20,
                }}>
                <View
                    style={{
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        width: isHover ? '36%' : '100%',
                    }}>
                    <View>
                        <Pressable
                            onHoverIn={() => {
                                setIsHovered(true);
                            }}
                            onHoverOut={() => {
                                setIsHovered(false);
                            }}>
                            <Text style={[styles.text, isHovered && styles.mouseHovered]}>
                                {title}
                            </Text>
                        </Pressable>
                        <Text style={styles.title}>{artist}</Text>
                    </View>
                    <LikeImage style={styles.imageGrey} />
                </View>
            </View>
            {/* 小屏上进度条 */}
            <View>
                <View style={[styles.progressBarContainer]}>
                    <GestureHandlerRootView>
                        <PanGestureHandler
                            onGestureEvent={onGestureEvent1}
                            onHandlerStateChange={onHandlerStateChange1}>
                            <View>
                                <View style={[styles.progressFill, { width: `${position}%` }]} />
                            </View>
                        </PanGestureHandler>
                    </GestureHandlerRootView>
                </View>
            </View>
            <View
                style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    width: isHover ? '93%' : '88%',
                }}>
                <Text style={styles.text}>{formatTime(position)}</Text>
                <Text style={styles.text}>{formatTime(duration)}</Text>
            </View>
            <View
                style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    width: isHover ? '93%' : '88%',
                    alignItems: 'center',
                    marginTop: 20,
                }}>
                <RepeatImage style={styles.imageGrey} />
                <TouchableOpacity onPress={skipToPrevious}>
                    <LeftImage style={styles.image} />
                </TouchableOpacity>
                <TouchableOpacity onPress={togglePlayPause}>
                    {playState ? (
                        <PauseImage style={styles.imagePlay} />
                    ) : (
                        <PalyImage style={styles.imagePlay} />
                    )}
                </TouchableOpacity>
                <TouchableOpacity onPress={skipToNext}>
                    <ForwardEndFillImage style={styles.image} />
                </TouchableOpacity>
                <MusicNoteListImage style={styles.imageGrey} />
            </View>
            <View
                style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    width: isHover ? '93%' : '88%',
                    alignItems: 'center',
                    marginTop: 30,
                }}>
                <ShareImage style={styles.imageGrey} />
                <BellIamge style={styles.imageGrey} />
                <ArrowDownCircleImage style={styles.imageGrey} />
                <DotImage style={styles.imageGrey} />
            </View>
        </View>
    );

    const secondRenderForPad = () => (
        <View style={{ flex: 1, alignItems: 'center' }} onLayout={onLayout}>
            <View
                style={{
                    width: '80%',
                    marginHorizontal: 20,
                    alignItems: isHover ? 'flex-start' : 'center',
                    marginTop: isHover ? 0 : 20,
                }}>
                <View
                    style={{
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        width: isHover ? '36%' : '100%',
                    }}>
                    <View>
                        <Pressable
                            onHoverIn={() => {
                                console.log('xlxl-鼠标移入');
                                setIsHovered(true);
                            }}
                            onHoverOut={() => {
                                console.log('xlxl-鼠标移出');
                                setIsHovered(false);
                            }}>
                            <Text style={[styles.text, isHovered && styles.mouseHovered]}>
                                {title}
                            </Text>
                        </Pressable>
                        <Text style={styles.title}>{artist}</Text>
                    </View>
                    <LikeImage style={styles.imageGrey} />
                </View>
            </View>
            {/* pad上纵屏下小屏上进度条 */}
            <View>
                <View style={styles.progressBarContainerForPad}>
                    <GestureHandlerRootView>
                        <PanGestureHandler
                            onGestureEvent={onGestureEvent1}
                            onHandlerStateChange={onHandlerStateChange1}>
                            <View>
                                <View style={[styles.progressFill, { width: `${position}%` }]} />
                            </View>
                        </PanGestureHandler>
                    </GestureHandlerRootView>
                </View>
            </View>
            <View
                style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    width: isHover ? '93%' : '88%',
                }}>
                <Text style={styles.text}>{formatTime(position)}</Text>
                <Text style={styles.text}>{formatTime(duration)}</Text>
            </View>
            <View
                style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    width: isHover ? '93%' : '88%',
                    alignItems: 'center',
                    marginTop: 20,
                }}>
                <RepeatImage style={styles.imageGrey} />
                <TouchableOpacity onPress={skipToPrevious}>
                    <LeftImage style={styles.image} />
                </TouchableOpacity>
                <TouchableOpacity onPress={togglePlayPause}>
                    {playState ? (
                        <PauseImage style={styles.imagePlay} />
                    ) : (
                        <PalyImage style={styles.imagePlay} />
                    )}
                </TouchableOpacity>
                <TouchableOpacity onPress={skipToNext}>
                    <ForwardEndFillImage style={styles.image} />
                </TouchableOpacity>
                <MusicNoteListImage style={styles.imageGrey} />
            </View>
            <View
                style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    width: isHover ? '93%' : '88%',
                    alignItems: 'center',
                    marginTop: 30,
                }}>
                <ShareImage style={styles.imageGrey} />
                <BellIamge style={styles.imageGrey} />
                <ArrowDownCircleImage style={styles.imageGrey} />
                <DotImage style={styles.imageGrey} />
            </View>
        </View>
    );

    const secondPadRender = () => (
        <View style={{ flex: 1, alignItems: 'center' }}>
            <View style={styles.message}>
                <View>
                    <Text style={styles.title}>{title}</Text>
                    <Text style={styles.artist}>{artist}</Text>
                </View>
                <LikeImage style={styles.imageGrey} />
            </View>
            {/* 大屏上的进度条 */}
            <View style={styles.slider}>
                <GestureHandlerRootView>
                    <PanGestureHandler
                        onGestureEvent={onGestureEvent1}
                        onHandlerStateChange={onHandlerStateChange1}>
                        <View>
                            <View style={[styles.progressFill, { width: `${position}%` }]} />
                        </View>
                    </PanGestureHandler>
                </GestureHandlerRootView>
            </View>
            <View style={styles.controls}>
                <Text style={styles.text}>{formatTime(position)}</Text>
                <Text style={styles.text}>{formatTime(duration)}</Text>
            </View>
            <View style={styles.container}>
                <RepeatImage style={styles.imageGrey} />
                <TouchableOpacity onPress={skipToPrevious}>
                    <LeftImage style={styles.image} />
                </TouchableOpacity>
                <TouchableOpacity onPress={togglePlayPause}>
                    {playState ? (
                        <PauseImage style={styles.imagePlay} />
                    ) : (
                        <PalyImage style={styles.imagePlay} />
                    )}
                </TouchableOpacity>
                <TouchableOpacity onPress={skipToNext}>
                    <ForwardEndFillImage style={styles.image} />
                </TouchableOpacity>
                <MusicNoteListImage style={styles.imageGrey} />
            </View>
            <View style={styles.container}>
                <ShareImage style={styles.imageGrey} />
                <BellIamge style={styles.imageGrey} />
                <ArrowDownCircleImage style={styles.imageGrey} />
                <DotImage style={styles.imageGrey} />
            </View>
        </View>
    );

    const extraRender = () => (
        <View style={styles.extra}>
            <Text
                style={{
                    marginTop: isHover ? 70 : 0,
                    fontSize: 23,
                    color: '#ffffff',
                }}>
                此歌曲为纯音乐，请您欣赏11
            </Text>
        </View>
    );

    const extraPage = () => (
        <View style={styles.extra}>
            <View
                style={{
                    flexDirection: 'row',
                    position: 'absolute',
                    height: '70%',
                    width: '85%',
                    // width: '55%',
                    // height: '100%',
                }}>
                <Image
                    source={require('../../../asset/artwork.png')}
                    style={{
                        width: 50,
                        height: 50,
                        borderRadius: 1,
                    }}
                />
                <View>
                    <Text
                        style={{
                            fontSize: 16,
                            color: '#ffffff',
                            margin: 5,
                        }}>
                        {title}
                    </Text>
                    <Text
                        style={{
                            fontSize: 12,
                            color: '#ffffff',
                            opacity: 0.4,
                            margin: 5,
                        }}>
                        {artist}
                    </Text>
                </View>
            </View>
            <Text
                style={{
                    fontSize: 23,
                    color: '#ffffff',
                }}>
                此歌曲为纯音乐，请您欣赏22
            </Text>
        </View>
    );

    const extraPageForPad = () => (
        <View style={styles.extra}>
            <View
                style={{
                    flexDirection: 'row',
                    position: 'absolute',
                    width: '55%',
                    height: '100%',
                }}>
                <Image
                    source={require('../../../asset/artwork.png')}
                    style={{
                        width: 50,
                        height: 50,
                        borderRadius: 1,
                    }}
                />
                <View>
                    <Text
                        style={{
                            fontSize: 16,
                            color: '#ffffff',
                            margin: 5,
                        }}>
                        {title}
                    </Text>
                    <Text
                        style={{
                            fontSize: 12,
                            color: '#ffffff',
                            opacity: 0.4,
                            margin: 5,
                        }}>
                        {artist}
                    </Text>
                </View>
            </View>
            <Text
                style={{
                    fontSize: 23,
                    color: '#ffffff',
                }}>
                此歌曲为纯音乐，请您欣赏222222
            </Text>
        </View>
    );

    let expandedLayoutOptions: ExpandedRegionLayoutOptions = {
        isExtraRegionPerpendicular: true,
        verticalSplitRatio: PresetSplitRatio.LAYOUT_1V1,
        horizontalSplitRatio: 0.9,
    };

    let foldedRegionLayoutOptions: FoldedRegionLayoutOptions = {
        verticalSplitRatio: PresetSplitRatio.LAYOUT_1V1,
    };

    let expandedLayoutOptionsPad: ExpandedRegionLayoutOptions = {
        isExtraRegionPerpendicular: true,
        verticalSplitRatio: 3 / 1,
        horizontalSplitRatio: 0.9,
    };

    let foldedRegionLayoutOptionsPad: FoldedRegionLayoutOptions = {
        verticalSplitRatio: 3 / 1,
    };

    const hoverModeLayoutOptions: HoverModeRegionLayoutOptions = {
        horizontalSplitRatio: 0.66,
        showExtraRegion: true,
    };
    // 定义在JS线程运行的函数
    // 旋转
    const rotation = useSharedValue(0);
    // const rotation = useSharedValue(90);
    const savedRotation = useSharedValue(0);
    const [isLandscape, setIsLandscape] = useState(true);

    // 创建旋转手势
    const rotationGestureForBackGround = Gesture.Rotation()
        .runOnJS(true)
        .onBegin(() => {
            // 手势开始时，保存当前角度
            savedRotation.value = rotation.value;
        })
        .onUpdate(e => {
            // 计算新角度（弧度转角度）
            let newRotation = savedRotation.value + e.rotation * (180 / Math.PI); // 转换为角度
            // 限制角度在0-90度之间
            newRotation = Math.max(0, Math.min(90, newRotation));
            rotation.value = isWide ? newRotation : 0;
        })
        .onEnd(() => {
            // 松手时回到最近 （0°或90°）
            if (rotation.value < 45) {
                rotation.value = withSpring(0);
                setIsLandscape(true);
            } else {
                rotation.value = withSpring(90);
                setIsLandscape(false);
            }
        });
    const animatedStyleForBackGround = useAnimatedStyle(() => ({
        transform: [{ rotate: `${rotation.value}deg` }],
    }));
    return (
        <View style={styles.containerOut} pointerEvents="box-none">
            <ImageBackground
                source={require('../../../asset/blur.png')}
            // style={{ width: '100%', height: '100%' }}
            >
                <GestureHandlerRootView>
                    <GestureDetector gesture={rotationGestureForBackGround}>
                        <Animated.View
                            style={[{ height: '100%' }, animatedStyleForBackGround]}>
                            <View
                                style={{
                                    position: 'absolute',
                                    width: '100%',
                                    alignItems: 'center',
                                    zIndex: 1,
                                }}>
                                <View
                                    style={{
                                        flexDirection: 'row',
                                        justifyContent: 'space-between',
                                        width: isExpanded ? '95%' : '88%',
                                        alignItems: 'center',
                                        marginTop: 40,
                                    }}>
                                    <TouchableOpacity onPress={backToLast}>
                                        <Image
                                            source={require('../../../asset/down.png')}
                                            style={styles.imageSmall}
                                        />
                                    </TouchableOpacity>
                                    <SharePlayImage style={styles.imageSmall} />
                                </View>
                            </View>
                            {isWide && isLarge && isLandscape && (
                                <View style={{ flex: 1, flexDirection: 'row' }}>
                                    <View style={styles.padLayout}>
                                        <View style={{ flex: 1, alignItems: 'center' }}>
                                            {/* 图片的放缩 */}
                                            <GestureHandlerRootView>
                                                <GestureDetector gesture={pinchGesture}>
                                                    <Animated.Image
                                                        style={[styles.imageArtworkBig, animatedStyle]}
                                                        source={require('../../../asset/artwork.png')}
                                                        resizeMode="contain"
                                                    />
                                                </GestureDetector>
                                            </GestureHandlerRootView>
                                        </View>
                                        {secondPadRender()}
                                    </View>
                                    <View style={{ flex: 1 }}>{extraRender()}</View>
                                </View>
                            )}

                            {isWide && !isLandscape && (
                                <Swiper
                                    showsPagination={true}
                                    // paginationStyle={styles.paginationStyle}
                                    loop={false}
                                    autoplay={false}
                                    // dotStyle={styles.swiperDot}
                                    // activeDotStyle={styles.activeDot}
                                    pagingEnabled={true}>
                                    <FoldSplitContainer
                                        primary={extraPageForPad()}
                                        secondary={secondRenderForPad()}
                                        expandedLayoutOptions={expandedLayoutOptionsPad}
                                        foldedLayoutOptions={foldedRegionLayoutOptionsPad}
                                        hoverModeLayoutOptions={hoverModeLayoutOptions}
                                    />
                                </Swiper>
                            )}

                            {isWide && !isLarge && (
                                <Swiper
                                    showsPagination={true}
                                    paginationStyle={styles.paginationStyle}
                                    loop={false}
                                    autoplay={false}
                                    dotStyle={styles.swiperDot}
                                    activeDotStyle={styles.activeDot}
                                    pagingEnabled={true}>
                                    <View style={styles.padLayout}>
                                        <View style={{ flex: 1, alignItems: 'center' }}>
                                            <Image
                                                source={require('../../../asset/artwork.png')}
                                                style={styles.imageArtworkBig}
                                            />
                                        </View>
                                        {secondPadRender()}
                                    </View>
                                    {extraPage()}
                                </Swiper>
                            )}
                            {!isWide && isExpanded && (
                                <FoldSplitContainer
                                    primary={primaryRender()}
                                    secondary={secondRender()}
                                    extra={extraRender()}
                                    expandedLayoutOptions={expandedLayoutOptions}
                                    foldedLayoutOptions={foldedRegionLayoutOptions}
                                    hoverModeLayoutOptions={hoverModeLayoutOptions}
                                />
                            )}
                            {!isWide && !isExpanded && (
                                <Swiper
                                    showsPagination={true}
                                    paginationStyle={styles.paginationStyle}
                                    loop={false}
                                    autoplay={false}
                                    dotStyle={styles.swiperDot}
                                    activeDotStyle={styles.activeDot}
                                    pagingEnabled={true}>
                                    <FoldSplitContainer
                                        primary={primaryRender()}
                                        secondary={secondRender()}
                                        extra={extraRender()}
                                        expandedLayoutOptions={expandedLayoutOptions}
                                        foldedLayoutOptions={foldedRegionLayoutOptions}
                                        hoverModeLayoutOptions={hoverModeLayoutOptions}
                                    />
                                    {extraPage()}
                                </Swiper>
                            )}
                        </Animated.View>
                    </GestureDetector>
                </GestureHandlerRootView>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    trackInfo: {
        marginTop: 20,
    },
    title: {
        fontSize: 23,
        color: '#ffffff',
    },
    artist: {
        fontSize: 16,
        color: '#ffffff',
        opacity: 0.4,
    },
    slider: {
        marginTop: 20,
        width: 300,
        height: 10,
        backgroundColor: '#ddd',
        borderRadius: 5,
        position: 'relative',
    },
    controls: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: 300,
    },
    container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: 300,
        alignItems: 'center',
        marginTop: 20,
    },
    message: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: 300,
        alignItems: 'center',
        marginTop: 50,
    },
    padLayout: {
        flex: 1,
    },
    topIcon: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '93%',
        alignItems: 'center',
        marginTop: 40,
    },
    extra: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'white',
        opacity: 0.4,
        fontSize: 12,
    },
    image: {
        width: 40,
        height: 40,
    },
    imageSmall: {
        width: 25,
        height: 25,
    },
    imageNavi: {
        width: 32,
        height: 5,
    },
    imageGrey: {
        width: 30,
        height: 30,
        opacity: 0.4,
    },
    imagePlay: {
        width: 80,
        height: 80,
    },
    imageArtwork: {
        width: '88%',
        height: '78%',
        marginTop: '25%',
        borderRadius: 10,
    },
    imageArtworkBig: {
        aspectRatio: 1,
        height: 300,
        marginTop: '18%',
        borderRadius: 10,
    },
    paginationStyle: {
        height: 10,
        top: 50,
    },
    swiperDot: {
        backgroundColor: 'rgba(255,255,255,0.2)',
        width: 7,
        height: 6,
        borderRadius: 2,
        magin: 3,
    },
    activeDot: {
        backgroundColor: 'rgb(255,255,255)',
        width: 12,
        height: 6,
        borderRadius: 3,
        magin: 3,
    },
    progressBarContainer: {
        height: 10,
        width: 320,
        backgroundColor: '#ddd',
        borderRadius: 5,
        position: 'relative',
    },
    progressBarContainerForPad: {
        height: 10,
        width: 600,
        backgroundColor: '#ddd',
        borderRadius: 5,
        position: 'relative',
    },
    progressFill: {
        height: '100%',
        backgroundColor: 'blue',
        borderRadius: 5,
    },
    thumb: {
        position: 'absolute',
        width: THUMB_SIZE,
        height: THUMB_SIZE,
        borderRadius: THUMB_SIZE / 2,
        backgroundColor: '#3f51b5',
        top: -8,
        left: -THUMB_SIZE / 2,
    },
    containerOut: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    mouseHovered: {
        fontSize: 14,
    },
});

export default MusicPlay;
